// 实例1： 函数式组件

import { useState, useEffect } from 'react'
function Demo11() {
    const [count, setCount] = useState(0)

    useEffect(() => {
        
    }) // 没有依赖， 组件初始化/组件更新时执行。

    useEffect(() => {
        console.log('dom挂载')
    },[]) // 空依赖，只在组件初始化时执行一次（开发环境执行2次，除非删除<StrictMode> 标签）。类似 componentDidMount

    useEffect(() => {
        console.log('count更新')
    }, [count]) // 依赖count，当初始化/count变化时执行。 类似componentDidUpdate shouldComponentUpdate

    useEffect(() => {
        return () => {
            console.log('卸载')
        }
    },[]) // return 一个函数，表示组件卸载时执行。类似componentWillUnmount

    return (
        <div className="main_text">
            <p>1.通过普通函数或箭头函数定义</p>
            <p>2.使用 useState Hook 管理状态</p>
            {/* <div>{ count }</div>
            <button onClick={() => setCount(count + 1)}>+1</button> */}
            <p>3.无内置生命周期，通过 useEffect 模拟,useEffect 统一处理挂载、更新、卸载逻辑</p>
            <p>4.无实例化开销，更轻量,占用内存更小</p>
            <p>5.无 this 上下文，无实例方法</p>
            <p>6.可以自定义 Hooks，提高逻辑复用</p>
        </div>
    )
}

export default Demo11
